<template>
	<view class="productDetails">
		<headTop>
			<uv-navbar title="商品详情" @leftClick="leftClick" bgColor="rgba(255,255,255,.2)"></uv-navbar>
		</headTop>
		<view class="tbImg">
			<uv-image :src="productData.image[0] ? productData.image[0] : '/static/images/default.png'" height="45vw"
				@tap="previewImage(productData.image)" mode="heightFix" class="imag">
				<template v-slot:error>
					<uv-image src="/static/images/default.png" height="45vw" class="imag"></uv-image>
				</template>
			</uv-image>
		</view>
		<view class="content">
			<view class="box">
				<view class="box-name">{{ productData.name }}</view>
				<view class="box-price">¥{{ productData.price }}</view>
				<uv-divider></uv-divider>
				<view class="box-icon">
					<view v-for="(item, index) in tabList" :key="index">
						<view class="icon">
							<uv-image :src="item.icon" width="5vw" height="5vw"></uv-image>
						</view>
						<view class="name">{{ item.name }}</view>
					</view>
				</view>
			</view>

			<view class="title" style="text-align: center">
				<view class="title-text">产品介绍</view>
				<image class="title-img" src="/static/images/tag.png"></image>
			</view>

			<view class="details">
				<view v-html="productData.detail"></view>
			</view>
		</view>

		<view class="goods-nav">
			<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
				@buttonClick="buttonClick" />
		</view>
		<uv-popup ref="popup" mode="bottom" closeable safeAreaInsetTop>
			<view class="container">
				<dynamic-form ref="dynamicFormRef" v-model="formData" :form-config="formConfig">
					<uni-number-box v-model="createData.quantity"></uni-number-box>
				</dynamic-form>
				<button type="primary" @click="submitForm"
					:style="{ backgroundColor: getTheme.themeColor }">提交订单</button>
			</view>
		</uv-popup>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import DynamicForm from "@/components/dynamic-form/index.vue";
	import { productApi, orderApi } from "@/api/index";

	//动态表单
	const dynamicFormRef = ref<any>(null);

	// 表单数据
	const formData = ref<any>({});

	// 表单配置
	const formConfig = ref<any>([]);

	// 提交表单
	const submitForm = async () => {
		try {
			// 验证表单
			const validateRes = await dynamicFormRef.value.validate();

			if (Object.keys(formData.value).length !== 0) {
				createData.value.contents = await Object.values(formData.value).map((item) => item.toString());
			}
			const res = await orderApi.createOrder(createData.value).then((res) => {
				if (res.status === 0) {
					uni.showToast({
						title: res.message,
						icon: "success"
					});
					popup.value.close();
				} else {
					uni.showToast({
						title: res.message,
						icon: "error"
					});
					popup.value.close();
				}
			});
		} catch (e) {
			uni.showToast({
				title: "请检查表单",
				icon: "none"
			});
		}
	};

	//获取跳转id
	import { onLoad } from "@dcloudio/uni-app";
	const isId = ref();
	onLoad((options) => {
		isId.value = Number(options.id);
		fetchFormConfig();
	});

	//提交订单参数
	const createData = ref<any>({
		product_id: isId,
		quantity: 1,
		contents: []
	});

	//商品详情
	const productData = ref<any>({
		image: [],
		name: "",
		price: 0,
		id: 0,
		stock: 1,
		max: 1,
		min: 0,
		detail: ""
	});

	// 初始表单数据
	const fetchFormConfig = async () => {
		await productApi.getProduct({ id: isId.value }).then((res) => {
			productData.value = res.data;

			res.data.order_parameters.forEach((item) => {
				if (item.options !== "[]") {
					const option = ref([]);

					JSON.parse(item.options).forEach((vtem) => {
						option.value.push({ text: vtem, value: vtem });
					});
					item.options = option.value;
				}
			});

			formConfig.value = res.order_parameters;
		});
	};
	/* ---------------------------------------------------头部------------------------------------------------- */
	import headTop from "@/components/headTop/index.vue";
	import { useAuthStore } from "@/stores/auth";
	const authStore = useAuthStore();
	const getTheme = authStore.getTheme();

	/* ---------------------------------------------------图片预览------------------------------------------------- */
	const previewImage = (image : any) => {
		uni.previewImage({ urls: image });
	};

	/* ---------------------------------------------------跳转上一页------------------------------------------------- */
	const leftClick = () => {
		uni.navigateBack({
			delta: 1
		});
	};

	/* ---------------------------------------------------购买商品------------------------------------------------- */
	const popup = ref<any>(null);
	const buttonClick = () => {
		popup.value.open();
	};

	const options = [
		{ icon: "star", text: "收藏" },
		{ icon: "heart", text: "订阅" },
		{ icon: "bars", text: "订单" }
	];
	const onClick = (e) => {
		if (e.content.icon === "bars") {
			uni.navigateTo({
				url: `/pages/order/order?id=${isId.value}`
			});
		} else if (e.content.icon === "star") {
			//收藏
			productApi.favorite({ id: Number(isId.value) }).then((res) => {
				if (res.status === 0) {
					uni.showToast({
						icon: "success",
						title: "收藏成功"
					});
				} else {
					uni.showToast({
						icon: "success",
						title: res.message
					});
				}
			});
		} else if (e.content.icon === "heart") {
			//订阅
			productApi.subscribe({ ids: [Number(isId.value)] }).then((res) => {
				if (res.status === 0) {
					uni.showToast({
						icon: "success",
						title: "订阅成功"
					});
				} else {
					uni.showToast({
						icon: "success",
						title: res.message
					});
				}
			});
		}
	};

	const buttonGroup = [
		{
			text: "立即购买",
			backgroundColor: "#2119b8",
			color: "#fff"
		}
	];

	const tabList = [
		{ icon: "/static/images/tab1.png", name: "正品保证" },
		{ icon: "/static/images/tab2.png", name: "安全保障" },
		{ icon: "/static/images/tab3.png", name: "急速到账" },
		{ icon: "/static/images/tab4.png", name: "售后服务" }
	];
</script>

<style lang="scss">
	.productDetails {
		.container {
			margin: 40rpx;
		}

		.tbImg {
			background-color: rgba(255, 255, 255, 0.3);
			width: 100%;

			.imag {
				margin-left: 50%;
				transform: translate(-50%);
			}
		}

		.content {
			margin-top: 2vw;

			.box {
				background-color: rgba(255, 255, 255, 0.6);
				border-radius: 2vw;
				padding: 2vw;

				.box-name {
					font-size: 32rpx;
					font-weight: 600;
				}

				.box-price {
					color: #ff4814;
					font-size: 36rpx;
					font-weight: 600;
				}

				.box-icon {
					display: flex;
					justify-content: space-between;
					color: #2018b8;
					font-size: 24rpx;

					.icon {
						display: inline-block;
						font-size: 0;
						line-height: 5vw;
					}

					.name {
						display: inline-block;
						transform: translate(5rpx, -1.2vw);
					}
				}
			}
		}

		.title {
			.title-img {
				height: 1.5vw;
				width: 26vw;
			}

			.title-text {
				font-weight: 600;
				transform: translate(-1vw, 4vw);
				font-size: 36rpx;
				position: relative;
				z-index: 99;
			}
		}

		.details {
			margin-top: 3vw;
		}

		.goods-nav {
			position: fixed;
			bottom: 0;
			width: 100vw;
		}
	}
</style>